<template>
    <div class="ceshi">
        <el-drawer :close-on-click-modal="false" class="hm-drawer" size="70%" direction="rtl" v-model="show"
            :before-close="handleClose">
            <template #header>
                <div class="hm-box-title">出库记录详情</div>
            </template>

            <div class="hm-form-item-box1">
                <div class="hm-form-title" style=" position: relative; ">
                    <div>基础信息</div>
                    <div class="cancleButton" v-if="commoditydetailsData.cancelStatus == 1">已作废</div>
                    <div class="cancleContent" v-if="commoditydetailsData.cancelStatus == 1">{{ commoditydetailsData.cancelUserName }}</div>
                    <div class="cancleContent" v-if="commoditydetailsData.cancelStatus == 1">{{ commoditydetailsData.outTime }}</div>
                </div>
                <el-row class="hm-row3 mb96" :gutter="60">
                    <el-col :span="24">
                        <el-descriptions :column="3">
                            <el-descriptions-item label="出库部门：">{{ commoditydetailsData.coreUserName
                                }}</el-descriptions-item>
                            <el-descriptions-item label="出库时间：">{{ commoditydetailsData.outTime
                                }}</el-descriptions-item>
                            <el-descriptions-item label="出库员：">{{ commoditydetailsData.outUserName
                                }}</el-descriptions-item>

                            <el-descriptions-item label="商品总数：">{{ commoditydetailsData.outNum
                                }}</el-descriptions-item>
                            <el-descriptions-item label="应归还时间：">{{ commoditydetailsData.cycleTime
                                }}</el-descriptions-item>
                            <el-descriptions-item label="归还状态：">{{ commoditydetailsData.putStatus
                                }}</el-descriptions-item>
                            <el-descriptions-item label="实际归还时间：">{{ commoditydetailsData.realityPutTime
                                }}</el-descriptions-item>
                        </el-descriptions>
                    </el-col>
                </el-row>
                <div class="image">
                    <div class="label">留存照片：</div>
                    <div class="value" v-for="(item, index) in commoditydetailsData.outImage?.split(',')" :key="index"
                        v-if="modifyButton">
                        <image-preview :src="item" :width="50" :height="50" style="margin-right: 10px;" />
                    </div>
                    <div class="upload_image" v-if="!modifyButton">
                        <ImageUploadDrags v-model="commoditydetailsData.outImage" :limit="5" :format="true"
                            :fileType="['png', 'jpg', 'jpeg']" />
                    </div>
                    <div class="edit" v-if="modifyButton && commoditydetailsData.cancelStatus !== 1" @click="modifyButton = !modifyButton">
                        <el-image :src="icon_xiugai"></el-image>
                        <span>修改</span>
                    </div>
                    <div class="edit" v-if="!modifyButton && commoditydetailsData.cancelStatus !== 1" @click="saveButton">
                        <el-image :src="icon_baocun"></el-image>
                        <span>保存</span>
                    </div>
                </div>

                <div class="hm-form-title">出库列表</div>
                <el-row class="hm-row3 mb96" :gutter="120">
                    <el-col :span="24">
                        <el-table v-loading="loading" :data="outBoundRecordDetailsList" border>
                            <el-table-column label="序号" type="index" width="55" align="center" />
                            <el-table-column label="商品名称" align="center" prop="styleName" show-overflow-tooltip />
                            <el-table-column label="商品主图" align="center" prop="productImage" width="100">
                                <template #default="scope">
                                    <image-preview :src="scope.row.productImage" :width="50" :height="50" />
                                </template>
                            </el-table-column>
                            <el-table-column label="商品类目" align="center" prop="productCategoryName"
                                show-overflow-tooltip />
                            <el-table-column label="库存编码" align="center" prop="stockCode" show-overflow-tooltip />
                            <el-table-column label="商品编码" align="center" prop="productId" show-overflow-tooltip />
                            <el-table-column label="直播机制" align="center" prop="" show-overflow-tooltip>
                                <template #default="scope">
                                    <div>{{ computedMechanism(scope.row.hmMechanismsList &&
                                        scope.row.hmMechanismsList[0] ||
                                        null, '一') }}
                                    </div>
                                    <div>{{ computedMechanism(scope.row.hmMechanismsList &&
                                        scope.row.hmMechanismsList[1] ||
                                        null, '二') }}
                                    </div>
                                    <div>{{ computedMechanism(scope.row.hmMechanismsList &&
                                        scope.row.hmMechanismsList[2] ||
                                        null, '三') }}
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column label="能否破价" align="center" prop="discountPrice" />
                            <el-table-column label="库存数量" align="center" prop="stockTotal" />
                            <el-table-column label="出库数量" align="center" prop="outNum" />
                            <el-table-column label="库存剩余" align="center" prop="stockAvailable" />
                        </el-table>
                        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                            v-model:limit="queryParams.pageSize" @pagination="getList" />
                    </el-col>
                </el-row>
            </div>
        </el-drawer>
    </div>
</template>
<script setup name="OutBoundRecordDetails" lang="ts">
import { selectOutStockById, updateOutStockAppList } from '@/api/group/productOutbound/index';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import icon_baocun from '@/assets/images/icon_baocun.png'
import icon_xiugai from '@/assets/images/icon_xiugai.png'
const props = defineProps({
    commoditydetailsData: {
        type: Object,
        default: ''
    },
    dialogInfoVisible: {
        type: Boolean,
        default: false
    },
});
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
})
/** 修改按钮 */
const modifyButton = ref(true)
const loading = ref(true);
const total = ref(0);
const outBoundRecordDetailsList = ref([])
const show = computed(() => props.dialogInfoVisible);
const emits = defineEmits(['doClose'])
const handleClose = async () => {
    if (!modifyButton.value) {
        await proxy?.$modal.confirm('您有信息未保存，确认离开？');
        emits('doClose')
        modifyButton.value = true
    } else {
        emits('doClose')
    }
}
watch(() => props.dialogInfoVisible, (v) => {
    if (v) {
        getList()
    }
});
/** 保存 */
const saveButton = async () => {
    await updateOutStockAppList({ id: props.commoditydetailsData.outId, inImage: props.commoditydetailsData.outImage })
    proxy?.$modal.msgSuccess('保存成功');
    modifyButton.value = true
    getList()
}
/**
 * 直播机制
 */
const computedMechanism = (row: any, numbers: string) => {
    if (row) {
        const price = row.price ? row.price : '-'
        const commission = row.commission ? row.commission + '%' : '-'
        const brokerage = row.brokerage ? row.brokerage + '%' : '-'
        const liveStreamingMechanism = row.liveStreamingMechanism ? row.liveStreamingMechanism : '-'
        const costPrice = row.costPrice ? row.costPrice : '-'
        if (row.cooperationMode) {
            if (row.cooperationMode == '分佣') {
                return '机制' + numbers + ': ' + '售价:' + price + ' 佣金:' + commission + ' 补充佣金:' + brokerage + ' 机制:' + liveStreamingMechanism + ' 成本:' + costPrice
            } else {
                return '机制' + numbers + ': ' + '成本:' + costPrice + ' 机制:' + liveStreamingMechanism
            }
        }
    }
}
/** 查询列表 */
const getList = async () => {
    try {
        loading.value = true;
        const res = await selectOutStockById({ ...queryParams.value, outId: props.commoditydetailsData.outId });
        (outBoundRecordDetailsList.value as any) = res.rows;
        total.value = res.total;
        loading.value = false;
    } catch (e) {
    } finally {
        loading.value = false;
    }
};
onMounted(() => {
})
</script>
<style lang="scss" scoped>
.image {
    width: 100%;
    display: flex;
    align-items: center;

    .upload_image {
        width: calc(100% - 266px);
    }

    .label {
        color: #303133;
        width: 70px;
        margin-right: 16px;
        font-size: 14px;
    }

    .edit {
        width: 92px;
        height: 38px;
        border-radius: 19px;
        border: 1px solid #0094FF;
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 16px;
        color: #0094FF;
        line-height: 1;
        justify-content: center;
        cursor: pointer;

        .el-image {
            width: 14px;
            height: 14px;
            margin-right: 4px;
        }
    }
}

.hm-box-title {
    font-weight: 600;
    font-size: 21px;
    color: #1A1B1C;
    padding-bottom: 24px;
    border-bottom: 1px solid #f3f3f7;
}

.hm-form-title {
    font-size: 16px;
    font-weight: 500;
    color: #1a1b1c;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    line-height: 1;
    .cancleButton{
        margin-left: 10px;
        background-color: rgba(255, 232, 232);
        color: #FC2540;
        width: 70px;
        height: 28px;
        border-radius: 4px;
        text-align: center;
        line-height: 28px;
    }
    .cancleContent{
        margin-left: 10px;
        color: #FC2540;
    }
}


:deep(.el-drawer__header) {
    margin-bottom: 0px !important;
}

.mb96 {
    margin-bottom: 0px;
}
</style>